import React, {Component} from 'react';

export default class List extends Component {
  // 组件的状态
  state = {
    list: [1, 2, 3]
  };
  // 操作状态的方法
  addItem = () => {
    this.setState({
      list: [...this.state.list, this.state.list.length+1]
    });
  }

  // 视图页面
  render() {
    return (
      <>
        <ul>
          {/* 数据驱动视图 */}
          {
            this.state.list.map(
              (item, index) => <li key={index}>{item}</li>
            )
          }
        </ul>
        {/* 通过操作状态的方法来改变状态 */}
        <button onClick={this.addItem}>添加一项</button>
      </>
    );
  }
}